<template>
	<view class="body-view">
		<!--导航和状态栏-->
		<view class="state-navigation">
			<view class="slim_header_navigation d-flex a-center j-center" >
				<view class="left_box" @tap="goBack">
					<image src="/static/center/back.png" class="back"></image>
				</view>
				<view class="title">计算结果</view>
				<view class="right_box">
					<!-- <image src="/static/center/dian.png" class="dian"></image> -->
				</view>
			</view>
		</view>
		<!-- 顶部位置占位 -->
		<view style="height:calc(120rpx + var(--status-bar-height));"></view>
		<view class="piece">
			<view class="piece-content">
				<view class="piece-content-index d-flex j-between">
					<view @tap="goBodyDataDetails" class="index-cell" style="width: 270rpx;background: rgba(29,198,145,0.07);">
						<view class="index-cell-title">当前基础代谢</view>
						<view class="index-cell-value d-flex">
							<view class="cell-value-number">{{rest}}</view>
							<view class="cell-value-unit">千卡/天</view>
						</view>
						<view class="index-cell-mark d-flex a-center j-center" style="background: #71EDC6;">
							<i class="icon icon-more-2" style="font-size: 20rpx;color: #ffffff;"></i>
						</view>
					</view>
					<view @tap="goBodyDataDetails" class="index-cell" style="width: 200rpx;" :class="`${isNormalBMI?'index-normal':'index-overrun'}`">
						<view class="index-cell-title">BMI指数</view>
						<view class="index-cell-value d-flex a-center">
							<view class="cell-value-number">{{BMI}}</view>
							<view class="cell-value-mark" :class="`${isNormalBMI?'title-normal':'title-overrun'}`">{{BMITip(BMI)}}</view>
							
						</view>
						<view class="index-cell-mark d-flex a-center j-center" :class="`${isNormalBMI?'more-normal':'more-overrun'}`">
							<i class="icon icon-more-2"  style="font-size: 20rpx;color: #ffffff;"></i>
						</view>
					</view>
					<view @tap="goBodyDataDetails" class="index-cell" style="width: 180rpx;" :class="`${isNormalFat?'index-normal':'index-overrun'}`">
						<view class="index-cell-title">体脂率</view>
						<view class="index-cell-value d-flex">
							<view class="cell-value-number">{{bodyfat}}%</view>
						</view>
						<view class="index-cell-mark d-flex a-center j-center" :class="`${isNormalFat?'more-normal':'more-overrun'}`">
							<i class="icon icon-more-2" style="font-size: 20rpx;color: #ffffff;"></i>
						</view>
					</view>
				</view>
				<view class="piece-content-synopsis" style="padding-top: 34rpx;">
					基础代谢并不能代表我们每天的摄入热量哦！其实，基础代谢只占我们每日能量消耗的60%-70%。 
				</view>
				<view class="piece-content-synopsis">
					饮食减脂，实际上就是让摄入热量小于实际消耗，制造热量差，并调节饮食结构，从而达到减脂塑形的效果。
				</view>
			</view>
		</view>
		<view class="piece">
			<view class="piece-content">
				<view class="piece-content-title d-flex a-center">
					<view class="content-title-text">每日推荐摄入热量</view>
					<view class="content-title-ingestion d-flex">
						<view class="title-ingestion-number">{{intake}}</view>
						<view class="title-ingestion-unit">千卡</view>
					</view>
				</view>
				<view class="piece-content-element d-flex j-between">
					<view class="content-element-left">
						<echartsIndex></echartsIndex>
					</view>
					<view class="content-element-right d-flex d-c j-center">
						<view class="element-right-row d-flex a-center j-between">
							<view class="d-flex a-center">
								<view class="right-row-mark" style="background: linear-gradient(90deg, #3EE5C4 0%, #1DC691 100%);"></view>
								<view class="right-row-name">碳水化合物</view>
							</view>
							<view class="d-flex a-center">
								<view class="right-row-scale">60%</view>
								<view class="right-row-divider"></view>
								<view class="right-row-heat">{{carbWater}}千卡</view>
							</view>
						</view>
						<view class="element-right-row d-flex a-center j-between">
							<view class="d-flex a-center">
								<view class="right-row-mark" style="background: linear-gradient(90deg, #FFC578 0%, #FFAF67 100%);"></view>
								<view class="right-row-name">蛋白质</view>
							</view>
							<view class="d-flex a-center">
								<view class="right-row-scale">15%</view>
								<view class="right-row-divider"></view>
								<view class="right-row-heat">{{protein}}千卡</view>
							</view>
						</view>
						<view class="element-right-row d-flex a-center j-between">
							<view class="d-flex a-center">
								<view class="right-row-mark" style="background: linear-gradient(90deg, #FF7B5F 0%, #FF5831 100%);"></view>
								<view class="right-row-name">脂肪</view>
							</view>
							<view class="d-flex a-center">
								<view class="right-row-scale">25%</view>
								<view class="right-row-divider"></view>
								<view class="right-row-heat">{{fat}}千卡</view>
							</view>
						</view>
					</view>
				</view>
				<view class="piece-content-describe d-flex a-center">
					<view class="content-describe-text">每日推荐摄入热量=每日消耗热量*75%</view>
					<view class="content-describe-mark">?</view>
				</view>
			</view>
		</view>
	</view>
    <statement></statement>
</template>

<script setup lang="tsx">
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import echartsIndex from "./components/echartsIndex.vue";
import BigNumber from "bignumber.js";
import moment from "moment";
import { checkBodyData } from "@/hooks/bodyData";
import statement from "@/components/statement.vue";

const goBack = () => {
	uni.navigateBack();
};
const rest = ref(0);//静息消耗
const BMI = ref(0);//BMI
const bodyfat = ref(0);//BMI
const isNormalBMI = ref(true);//BMI是否正常
const isNormalFat = ref(true);//体脂率是否正常
const intake = ref(0);//推荐摄入热量
const carbWater = ref(0);//碳水化合物
const protein = ref(0);//蛋白质
const fat = ref(0);//脂肪
onLoad((param:any) => {
	let data = JSON.parse(param.data);
	var age = moment().diff(moment(data.birthday, 'YYYY年MM月DD日'), 'years');
	rest.value = countRest(data.sex,data.stature,age,Number(data.currentWeight));
	
	let m = new BigNumber(data.stature).div(new BigNumber(100));
	BMI.value = Number(new BigNumber(Number(data.currentWeight)).div(m.times(m)).toNumber().toFixed(1));
	
	let val = new BigNumber(1.2).times(new BigNumber(BMI.value)).plus(new BigNumber(0.23).times(new BigNumber(age))).minus(new BigNumber(5.4))
	if(data.sex==1){
		val.minus(new BigNumber(18.1))
	}
	bodyfat.value = Number(val.toNumber().toFixed(1));
	
	if(BMI.value>23.9){
		isNormalBMI.value = false;
	}
	if(bodyfat.value>34.9){
		isNormalFat.value = false;
	}
	//
	let ratio = 1;
	if(data.exercise=="轻度")ratio = 0.85;
	if(data.exercise=="中度")ratio = 0.75;
	if(data.exercise=="重度")ratio = 0.65;
	
	intake.value = Math.round(new BigNumber(rest.value).div(new BigNumber(ratio)).times(new BigNumber(0.75)).toNumber());
	
	carbWater.value = Math.round(new BigNumber(intake.value).times(new BigNumber(0.6)).toNumber());
	
	protein.value = Math.round(new BigNumber(intake.value).times(new BigNumber(0.15)).toNumber());
	
	fat.value = Math.round(new BigNumber(intake.value).times(new BigNumber(0.25)).toNumber());
});
//计算静息消耗
const countRest = (sex:number,stature:number,age:number,currentWeight:number) => {
    if (sex === 1) {
		
        let weight = new BigNumber(13.73).multipliedBy(
			new BigNumber(currentWeight)
        );
        let height = new BigNumber(5).multipliedBy(
			new BigNumber(stature)
        );
        let ages = new BigNumber(6.9).multipliedBy(
			new BigNumber(age)
		);
		return Math.round(
            new BigNumber(67).plus(weight).plus(height).minus(ages).toNumber()
        );
    }
    if (sex === 2) {
        let weight = new BigNumber(9.6).multipliedBy(
            new BigNumber(currentWeight)
        );
        let height = new BigNumber(1.72).multipliedBy(
            new BigNumber(stature)
        );
        let ages = new BigNumber(4.7).multipliedBy(
			new BigNumber(age)
		);
        return Math.round(
            new BigNumber(661).plus(weight).plus(height).minus(ages).toNumber()
        );
    }
	return 0;
};
const BMITip = (index:number) => {
	if(index<18.5)return "偏瘦";
	if(index>=18.5&&index<=23.9)return "正常";
	if(index>=24&&index<=29.9)return "偏重";
	if(index>=30&&index<=34.9)return "超重";
	if(index>34.9)return "严重超重";
}
const goBodyDataDetails = ()=>{
    if(!checkBodyData()){
        return
    }

    uni.navigateTo({
        url: `/pages/bodyDataDetails/bodyDataDetails`,
    });
}
</script>


<style lang="scss" scoped>
@import './metabolizeCountResult.scss';
</style>